Axes and Direction with Flexbox

The Flexbox model relies on two axes: the main axis and the cross axis. The main axis is defined by flex-direction, which has four possible values:

• row
• row-reverse
• column
• column-reverse

The two row settings will create the main axis horizontally - or inline direction. The two column settings will create the main axis vertically - or block direction. block or inline here refer to the CSS display settings which we have covered previously.

The axis determines the flow of your content - you can think of this as being either rows or columns - and they will be determined when you start aligning and justifying content within a flex container.